<template>
  <div class="material">
    <div class="material-classify">
      <div class="material-classify-title">素材分类</div>
      <div class="material-classify-content">
        <div
          :class="[
            'material-classify-content-list',
            classifyIndex == index
              ? 'material-classify-content-list-active'
              : '',
          ]"
          v-for="(classify, index) in classifyData"
          :key="index"
          @click="onClassifySelect(classify, index)"
        >
          {{ classify.title }}
        </div>
      </div>
    </div>
    <div class="material-box">
      <div class="material-box-title">
        <div class="material-box-title-name">素材市场</div>
        <div class="material-box-title-search">
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="searchValue"
            @keyup.enter.native="getMaterialList"
          >
          </el-input>
          <!-- @keyup.enter.native="" -->
        </div>
      </div>
      <div class="material-box-content">
        <div class="material-box-content-tab">
          <!-- v-model="materialBoxValue" @change="onMaterialChange" -->
          <el-collapse>
            <el-collapse-item title="分类">
              <div class="material-tab-content">
                <div
                  :class="[
                    'material-tab-content-list',
                    materialIndex == childIdx
                      ? 'material-tab-content-list-active'
                      : '',
                  ]"
                  v-for="(
                    classifyChild, childIdx
                  ) in classifyDataChild.children"
                  :key="childIdx"
                  @click="onMaterialSelect(classifyChild, childIdx)"
                >
                  {{ classifyChild.title }}
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="material-box-content-box">
          <MaterialGoods :list="materialData" />
        </div>
        <div class="material-box-content-pagination">
          <el-pagination
            @size-change="materialSizeChange"
            @current-change="materialCurrentChange"
            :current-page="page"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="materialTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MaterialGoods from '@/components/material-goods';
import Material from '@/api/material';
import Way from '@/utils/way';

export default {
  name: 'MaterialItem',
  components: { MaterialGoods },
  props: {},
  data() {
    return {
      classifyData: [], // 分类列表
      classifyDataChild: {}, // 二级分类
      classifyIndex: 0, // 分类索引
      materialIndex: -1, // 素材市场分类
      classifyChildValue: {}, // 二级分类选择内容
      searchValue: '', // 搜索
      page: 0, // 页面
      pageSize: 15, // 条数
      materialData: [], // 数据列表
      materialTotal: 0, // 数据总数
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getMaterialList();
    this.getMaterialCates();
  },
  activated() {
    this.getMaterialList();
  },
  methods: {
    // 素材分类点击事件
    onClassifySelect(item, index) {
      const that = this;
      const isShowChild = item.children.findIndex(
        (oj) => oj.id == that.classifyChildValue.id
      );
      if (isShowChild != -1) {
        that.materialIndex = isShowChild;
      } else {
        that.materialIndex = -1;
      }
      this.classifyIndex = index;
      this.classifyDataChild = item;
    },
    // 素材市场分类
    onMaterialSelect(item, index) {
      this.materialIndex = index;
      this.classifyChildValue = item;
      this.getMaterialList();
    },

    // 当前条数
    materialSizeChange(val) {
      this.pageSize = val;
      this.getMaterialList();
    },

    // 当前页数
    materialCurrentChange(val) {
      this.page = val;
      this.getMaterialList();
    },

    // 获取素材列表
    getMaterialList() {
      const that = this;
      const param = {
        cate_id: that.classifyChildValue.id,
        title: that.searchValue,
        page: that.page,
        limit: that.pageSize,
      };
      Material.getMaterialList(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.materialData = res.data.rows;
          that.materialTotal = res.data.total;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 获取素材分类
    getMaterialCates() {
      const that = this;
      Material.getMaterialCates().then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.classifyData = res.data;
          if (res.data.length && res.data[0].children) {
            that.classifyDataChild = res.data[0];
          }
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import '@/style/left-side-180.less';
.material {
  display: flex;
  height: 100%;

  .material-classify {
    margin-right: 24px;
  }

  .material-box {
    flex: 1;

    .material-box-title {
      display: flex;
      justify-content: space-between;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #f1f1f1;

      .material-box-title-name {
        font-weight: 700;
        font-size: 16px;
      }
    }

    // 主要内容
    .material-box-content {
      margin-top: -1px;
      padding-bottom: 20px;

      // 分类
      .material-box-content-tab {
        /deep/ .el-collapse {
          .el-collapse-item__content {
            padding-bottom: 12px;
          }
        }
        .material-tab-content {
          display: flex;
          flex-wrap: wrap;

          .material-tab-content-list {
            padding: 6px 20px;
            cursor: pointer;
          }

          .material-tab-content-list-active {
            font-weight: 700;
            border-radius: 12px;
            background-color: #f1f1f1;
          }
        }
      }
      .material-box-content-box {
        padding-top: 12px;
      }

      .material-box-content-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
      }
    }
  }
}
</style>
